<template>
    <h2>新增机构页面</h2>
    <table>
        <tbody>
            <tr>
                <td>
                    机构名称:<input type="text" v-model="start.name">
                </td>
                <td>
                    <button class="btn btn-primary" @click="GetMessageShow">查询</button>
                    <button class="btn btn-primary" @click="Add">添加</button>
                    <button class="btn btn-primary" @click="Dao">导出</button>
                    <button class="btn btn-primary" @click="Delete">批量删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered">

        <tbody>
            <tr class="bg-primary">
                <td>
                    <input type="checkbox">
                </td>
                <td>机构名称</td>
                <td>机构封面</td>
                <td>特色服务</td>
                <td>营业时间</td>
                <td>机构地址</td>
                <td>联系电话</td>
                <td>发布时间</td>
                <td>状态</td>
                <td>机构详情</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in MessageShow">
                <td>
                    <input type="checkbox">
                </td>
                <td>{{ item.name }}</td>
                <td><img :src="item.pic" style="display: '';max-width: 100px;max-height: 100px"></td>
                <td style="color: aqua;">{{ item.fuWu }}</td>
                <td>{{ item.yTime.substring(0, 10) }}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.phone.substring(0, 3) + "****" + item.phone.substring(7) }}</td>
                <td>{{ item.fTime.substring(0, 10) }}</td>
                <td style="color: aqua;">{{ item.start ? "已发布" : "未发布" }}</td>
                <td>{{ item.xiangQing }}</td>
                <td>
                    <a @click="Delete(item.id)" style="color: red;">删除</a>
                    <a @click="Update(item.id)" style="color: blue;">修改</a>
                    <a @click="Update(item.id)" style="color: green;">启用</a>
                    <a @click="Update(item.id)" style="color: yellow;">禁用</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    <a style="color: red;" @click="show('a')">上一页</a>
                    <a style="color: red;" @click="show('b')">下一页</a>
                    <a style="color: red;" @click="show('c')">首页</a>
                    <a style="color: red;" @click="show('d')">尾页</a>
                    共{{ count }}数,每页{{ start.index }}条,共{{ start.size }}/{{ sum }}条
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted, toRefs } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
import axios from "axios"
import { useRouter } from "vue-router";

const router = useRouter();

const MessageShow = ref([])


const form = reactive({
    start: {
        name: "",
        index: 5,
        size: 1
    },
    list: [],
    count: 6,
    sum: 6
})
const { start, list, count, sum } = toRefs(form)

const GetMessageShow = () => {
    let obj = {
        name: start.value.name,
        index: start.value.index,
        size: start.value.size
    }
    axios.get("http://localhost:5028/api/Message/GetAll").then(res => {
        MessageShow.value = res.data;
        start.value.index = res.data.index;
        start.value.size = res.data.size;
    })
}
//分页
const show = (e: any) => {
    switch (e) {
        case 'a':
            if (start.value.index -= 1) {
                alert("已是第一页");
                return;
            }
            start.value.index = 1
            break;
        case 'b':
            if (start.value.index += 1) {
                alert("已是最后一页");
                return;
            }
            start.value.index = sum.value
            break;
        case 'c':
            if (start.value.index == 1) {
                alert("已是第一页");
                return;
            }
            start.value.index = 1
            break;
        case 'd':
            if (start.value.index = sum.value) {
                alert("已是最后一页");
                return;
            }
            start.value.index = sum.value
            break;


    }
}
//删除
const Delete = (id: number) => {
    if (confirm("确认批量删除？？？")) {
        axios.delete("http://localhost:5028/api/Message/Delete?id=" + id).then(res => {

            if (res.data > 0) {
                alert("删除成功！！");
                GetMessageShow();
            }
            else {
                alert("删除失败！");
            }
        })
    }

}
//添加
const Add = () => {
    router.push("/messageAdd");
}
//修改
const Update = (id: Number) => {
    router.push("/messageUpdate?id=" + id);
}
//导出
const Dao = () => {
    window.location.href = "http://localhost:5028/api/Message/GoTpListExcel"
}
//钩子函数
onMounted(() => {
    GetMessageShow();
})
</script>